<template>
    <div>
        <input type="text" v-model="que.spbt">食谱标题
        
        <select v-model="que.lxid">
                        <option value="">请选择</option>
                        <option value="1">川菜</option>
                        <option value="2">鲁菜</option>
                        <option value="3">粤菜</option>
                    </select>食谱分类
                    <input type="button" value="查询" @click="xs">

        <table>
            
            <thead>
                <tr>
                    <td>食谱标题</td>
                    <td>食谱分类</td>
                    <td>食谱图片</td>
                    <td>负责人</td>
                   
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.spbt}}</td>
                    <td>{{m.lxid}}</td>
                    <td>{{m.img}}
                        <img src="https://localhost:7189/+m.img" style="width: 100px;height: 100px;" alt="" >
                    </td>
                    <td>{{m.fzr}}</td>
                   
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';

const data=ref([{
    "spid": 0,
  "spbt": "string",
  "lxid": 0,
  "img": "string",
  "fzr": "string"
}])
const  que=ref({
    spbt:"",
    lxid:"",
})
onMounted(()=>{
    xs()
})

const xs=()=>{
    axios.get("https://localhost:7189/api/sp/xs",{params:que.value}).then(res=>{
        data.value=res.data
    })
}
</script>

<style scoped>

</style>